<template>
	<view class="container">
		<view class="index-header">
			<!-- 头部人物卡片 -->
			<view class="person-card">
			  <image class="avatar" src="/static/images/index/person.png"></image>
			  <view class="info">
			    <p class="name">张三</p>
			    <p class="department">网络部</p>
			  </view>
			</view>
			
			<!-- 指标数值卡片 -->
			<view class="inspect-card-group">
			  <view class="inspect-card">
			    <view class="card-item">
			      <view class="item-left">今日巡检次数</view>
			      <view class="item-right">10</view>
			    </view>
			    <view class="card-item">
			      <view class="item-left">本组未巡检数</view>
			      <view class="item-right">1</view>
			    </view>
			  </view>
			  <view class="inspect-card">
			    <view class="card-item">
			      <view class="item-left">异常未办结</view>
			      <view class="item-right">10</view>
			    </view>
			    <view class="card-item">
			      <view class="item-left">本组未办结</view>
			      <view class="item-right">1</view>
			    </view>
			  </view>
			</view>
			
			<!-- 巡检按钮部分 -->
			<view class="menu-card">
			  <view class="menu-item">
			    <i class="iconfont icon-jihua1"></i>
			    <view class="menu-info">巡检计划</view>
			  </view>
			  <view class="menu-item">
			    <i class="iconfont icon-jihua"></i>
			    <view class="menu-info">巡检日程</view>
			  </view>
			  <view class="menu-item">
			    <i class="iconfont icon-tongji"></i>
			    <view class="menu-info">巡检统计</view>
			  </view>
			</view>
			
			<!-- 任务部分 -->
			<view class="date-work-group">
			  <view class="date-work">
			    <view class="work-name">日任务</view>
			    <view class="work-value">1</view>
			  </view>
			  <view class="date-work">
			    <view class="work-name">周任务</view>
			    <view class="work-value">1</view>
			  </view>
			  <view class="date-work">
			    <view class="work-name">月任务</view>
			    <view class="work-value">1</view>
			  </view>
			  <view class="date-work">
			    <view class="work-name">年任务</view>
			    <view class="work-value">1</view>
			  </view>
			</view>
			<view class="date-card">
			</view>
		</view>
		
		<!-- 中间任务内容部分 -->
		<view class="index-content">
		
		  <view class="list">
		    <view class="list-item" v-for="(item, index) in todoList">
		      <view class="item-top">
		        <view class="top-left">
		          {{item.name}}
		        </view>
		        <view class="top-right">
		          <i class="iconfont icon-tixingshixin"></i>
		          <view class="name">待检</view>
		        </view>
		      </view>
			  
		      <view class="item-bottom">
		        <view class="bottom-left">
		          {{item.address}}
		        </view>
		        <view class="bottom-right">
		          <i class="iconfont icon-zhinanzhidao"></i>
		        </view>
		      </view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				todoList: [
				  {
				    name: '汇城数智 1 机房',
				    state: '待检',
				    address: '中和街道东风路192号2栋一层',
				    gis: ''
				  },
				  {
				    name: '汇城数智 2 机房',
				    state: '待检',
				    address: '中和街道东风路192号2栋一层',
				    gis: ''
				  },
				  {
				    name: '水利局 1 机房',
				    state: '待检',
				    address: '中和街道东风路192号2栋一层',
				    gis: ''
				  }
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.container {
	  width: 100%;
	  height: 100%;
	  font-family: Arial, sans-serif;
	  // background-color: #f4f4f9;
	  // background-color: red;
	}
	
	.index-header {
	  font-family: Arial, sans-serif;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  margin: 8px;
	  flex-direction: column;
	  
	  .person-card {
	    width: calc(100% - 12px);
	    padding: 10px;
	    border-radius: 8px;
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	    background-color: white;
	    display: flex;
	    align-items: center;
	    flex-direction: row; /* 默认水平排列 */
		
		.avatar {
		  width: 40px;
		  height: 40px;
		  border-radius: 50%;
		  object-fit: cover;
		  margin-right: 20px;
		}
		.info {
		  text-align: left;
		
		  .name {
		    font-size: 18px;
		    margin: 0;
		    color: #333;
		  }
		  .department {
		    font-size: 14px;
		    color: #666;
		  }
		}
	  }
	  
	  .inspect-card-group {
		display: flex;
		width: calc(100% - 12px);
		align-items: center;
		flex-direction: row; /* 默认水平排列 */
		gap: 12px;
		margin-top: 8px;

		.inspect-card {
		  width: 50%;
		  height: 80px;
		  border-radius: 6px;
		  line-height: 40px;
		  font-size: 20px;

		  .card-item {
			width: 100%;
			height: 40px;
			background-color: white;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-left: 16px;
			padding-right: 16px;

			.item-left {

			}

			.item-right {

			}
		  }
		}
	  }
	  
	  .menu-card {
	    width: calc(100% - 12px);
	    height: 60px;
	    background-color: white;
	    margin-top: 8px;
	    display: flex;
	    flex-direction: row;
	    gap: 32px;
	    padding-left: 10px;
	  
	    .menu-item {
	      width: 80px;
	      height: 60px;
	      background-color: #F1F5FF;
	      display: flex;
	      align-items: center;
	      flex-direction: column;
	      border: 1px solid #ccc;
	      border-radius: 6px;
	  
	      .iconfont {
	        font-size: 28px;
	      }
	  
	      .menu-info {
	        line-height: 30px;
	        font-size: 16px;
	      }
	    }
	  }
	  
	  .date-work-group {
	    width: calc(100% - 12px);
	    height: 60px;
	    display: flex;
	    flex-direction: row;
	    background-color: white;
	    margin-top: 8px;
	    padding-left: 10px;
	    padding-top: 8px;
	    padding-bottom: 8px;
	    gap: 20px;
	  
	    .date-work {
	      width: 80px;
	      display: flex;
	      justify-content: center;
	      align-items: center;
	      flex-direction: row;
	      border: 1px solid #ccc;
	      border-radius: 6px;
	    }
	  }
	}
	
	/* 中间内容区样式(后面换成无限加载列表) */
	.index-content {
	  width: 100%;
	  height: 600px;
	  background-color: gainsboro;
	  padding-top: 8px;
	  border-radius: 10px;
	  display: flex;
	  justify-content: center;
	
	  .list {
	    width: calc(100% - 12px);
	    height: 360px;
	    display: flex;
		flex-direction: column;
	    align-items: center;
	    gap: 10px;
	
	    .list-item {
	      width: 100%;
	      height: 100px;
	      background-color: white;
	      border-radius: 12px;
	      display: flex;
	      justify-content: space-between;
		  flex-direction: column;
	
	      .item-top {
	        height: 54px;
	        display: flex;
	        flex-direction: row;
	        justify-content: space-between;
	        padding-left: 12px;
	
	        .top-left {
	          width: 220px;
	          height: 100%;
	          line-height: 54px;
	          font-size: 24px;
	
	        }
	        .top-right {
	          width: 140px;
	          height: 100%;
	          display: flex;
	          flex-direction: row;
	          justify-content: center;
	          align-items: center;
	          gap: 4px;
	
	          .iconfont {
	            color: #E99D42;
	            font-size: 28px;
	          }
	
	          .name {
	            font-size: 22px;
	          }
	        }
	      }
	
	      .item-bottom {
	        height: 54px;
	        display: flex;
	        flex-direction: row;
	        justify-content: space-between;
	        padding-left: 18px;
	
	        /* todo: 需要设置超出10个字符时省略的效果 */
	        .bottom-left {
	          width: 220px;
	          height: 100%;
	          display: flex;
	          justify-content: center;
			  align-items: center;
	        }
	        .bottom-right {
	          width: 140px;
	          height: 100%;
	          display: flex;
	          justify-content: center;
	          align-items: center;
	
	          .iconfont {
	            font-size: 28px;
	            color: #5290FF;
	          }
	        }
	      }
	    }
	  }
	}
</style>
